import React, { ReactNode, useRef, useState, useEffect } from "react";
import { Link, Routes, Route, Outlet, useNavigate } from "react-router-dom";
import { loaddocterlistAPI } from "../pages/services/products";
import axios from "axios";
import { Button, SearchBar, Space, Toast, Swiper, Tabs } from "antd-mobile";
import { SearchBarRef } from "antd-mobile/es/components/search-bar";
// import { SwiperRef } from "antd-mobile/es/components/swiper";
// import styles from "./demo1.less";
import {
  AntOutline,
  FrownOutline,
  PlayOutline,
  RightOutline,
  ShopbagOutline,
  UserSetOutline,
} from "antd-mobile-icons";
// --------------------------------------------------------引入部分↑
function Home() {
  const navigat = useNavigate();
  const searchRef = useRef<SearchBarRef>(null);
  // const [icon, setIcon] = useState<ReactNode | null>(<SetOutline />);
  //轮播图
  const [doctorlist, setdoctorlist] = useState([]);
  useEffect(() => {
    loaddocterlistAPI().then((res) => {
      console.log(res.data.list);
      setdoctorlist(res.data.list);
    });
  }, []);

  const colors = ["#ace0ff", "#bcffbd", "#e4fabd", "#ffcfac"];
  const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
      <div
        // className={styles.content}
        style={{ background: color, height: "100%" }}
        // onClick={() => {
        //   Toast.show(`你点击了卡片 ${index + 1}`);
        // }}
      >
        {index + 1}
      </div>
    </Swiper.Item>
  ));
  // 轮播图↑
  return (
    <div className="honebox">
      <div className="topsearch">
        <SearchBar
          placeholder="请输入内容"
          showCancelButton
          style={{
            "--border-radius": "100px",
            "--background": "#ffffff",
            "--height": "32px",
            "--padding-left": "12px",
          }}
        />
      </div>
      <div className="centerbox">
        <div className="banner">
          <Swiper
            autoplay
            loop
            style={{
              height: "3rem",
              marginTop: "1rem",
              borderRadius: "8px",
            }}
          >
            {items}
          </Swiper>
        </div>
        <div className="seekdoctor">
          <div
            className="iconFt"
            onClick={() => {
              navigat("/doctor", {});
            }}
          >
            <UserSetOutline />
            <p>医生</p>
          </div>
          <div className="iconFt">
            <ShopbagOutline />
            <p>药品</p>
          </div>

          <div className="iconFt">
            <FrownOutline />
            <p>查病因</p>
          </div>

          <div className="iconFt">
            <PlayOutline />
            <p>名医讲堂</p>
          </div>
        </div>
        <div className="quizzer">
          <div className="heart">
            <p>身体小问题，快速问医生</p>
            <i>三甲医院主治及以上医生，已解答120万个问题</i>
            <Button color="success" style={{ width: "75%", color: "azure" }}>
              快速提问
            </Button>
          </div>
        </div>
        <div className="list">
          <div className="listTop">
            <div className="drtop">
              <i>医师讲堂</i>
              <p>
                更多
                <RightOutline />
              </p>
            </div>
            <div className="drmiddle">
              <div className="mdp">
                <div className="mdpmg">
                  <p>
                    隐形正畸的危害？30岁进行正畸还来得及吗？<i>￥9.00</i>
                  </p>
                  <img
                    style={{ width: "20%", height: "20%" }}
                    src="https://img2.baidu.com/it/u=3260277765,667262179&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
                    alt=""
                  />
                </div>
                <div className="mdpmg">
                  <p>
                    隐形正畸的危害？30岁进行正畸还来得及吗？<i>￥9.00</i>
                  </p>
                  <img
                    style={{ width: "20%", height: "20%" }}
                    src="https://img2.baidu.com/it/u=3260277765,667262179&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div className="listBotton">
            <div className="listBtop">
              <Tabs>
                <Tabs.Tab title="医生" key="fruits">
                  <div className="btlist">
                    {doctorlist.map((item: any) => {
                      return (
                        <>
                          <div className="btlistt">
                            <div
                              key={item.id}
                              className="content"
                              style={{ width: "70%" }}
                            >
                              <p>{item.desc}</p>
                              <i>{item.name}</i>
                            </div>
                            <img
                              style={{ height: "5rem" }}
                              src={item.avatar}
                              alt=""
                            />
                          </div>
                        </>
                      );
                    })}
                  </div>
                </Tabs.Tab>
                <Tabs.Tab title="饮食健康" key="vegetables">
                  饮食
                </Tabs.Tab>
                <Tabs.Tab title="两性健康" key="animals">
                  两性
                </Tabs.Tab>
                <Tabs.Tab title="孕产育儿" key="baby">
                  宝宝
                </Tabs.Tab>
              </Tabs>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Home;
